<template>
  <div class="FTRegistration">
    <div class="header">
      <van-nav-bar title="申请注册" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <header>
      <img src="../../assets/images/greenFinance/6.png"/>
      <p>您的信息已受到保护，请放心填写</p>
    </header>
    <section class="section">
      <div class="registration_from">
        <p>法人代表</p>
        <input type="text" placeholder="填写法人中文姓名" class="input1" v-model.trim='formData.aname'>
      </div>
      <div class="registration_from">
        <p>联系电话</p>
        <input type="number" placeholder="填写法人联系方式" class="input1" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)">
      </div>
      <div class="registration_from2">
        <p>身份证号码</p>
        <input type="text" placeholder="填写法人身份证号码" class="input1" v-model.trim='formData.capital'>
      </div>
      <div class="registration_from">
        <p>公司名称</p>
        <input type="text" placeholder="填写公司中文名称" class="input1" v-model.trim='formData.corporateName'>
      </div>
      <div class="registration_from">
        <p>公司地址</p>
        <div class="xiala1">
          <input type="text" placeholder="请选择省市区" :value="addressInif" @click="onSelAddr()" readonly="readonly">
          <img src="../../assets/images/greenFinance/12.png">
        </div>
        <van-popup v-model="showAdder" position="bottom" :overlay="false">
          <van-area :area-list="areaList" @confirm="onAddrData" @cancel="onAddrCancel" />
        </van-popup>
      </div>
      <div class="registration_from1">
        <p>上传证件信息</p>
        <div class="Merchant_foot">
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow3?formData.avatarshow3:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar3">
            <input type="file" name="avatar3" accept="image/* " style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage3($event)" ref="avatarInput3" >
            <p>公司营业执照</p>
          </div>
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow?formData.avatarshow:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar" >
            <input type="file" name="avatar" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage($event)" ref="avatarInput" >
            <p>身份证正面</p>
          </div>
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow1?formData.avatarshow1:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar1">
            <input type="file" name="avatar1" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage1($event)" ref="avatarInput1" >
            <p>身份证反面</p>
          </div>
          <div class="Merchant_foot_div">
            <img :src="formData.avatarshow2?formData.avatarshow2:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar2">
            <input type="file" name="avatar2" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage2($event)" ref="avatarInput2" >
            <p>手持身份证</p>
          </div>
        </div>
      </div>
      <div class="registration_from">
        <p>备注</p>
        <textarea type="text" placeholder="请留下您想咨询的问题，我们会在最快的时间回复您，谢谢！" rows="3" v-model.trim='formData.businessScope'></textarea>
      </div>
    </section>
    <button class="Merchant_button" @click="submit()">提交申请</button>
  </div>

</template>

<script>
  import  AdderssInif from '../../../static/area'
    export default {
        name: "FTRegistration",
      data() {
        return {
          areaList:AdderssInif,
          addressInif:'',
          showAdder:false,
          formData: {
            aname: '',
            aphone: '',
            capital:'',
            businessScope:'',
            corporateName:'',
            avatar: '',
            avatarshow: '',
            avatar1: '',
            avatarshow1: '',
            avatar2: '',
            avatarshow2: '',
            avatar3: '',
            avatarshow3: '',
          },
        }
      },
      mounted() {


      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //显示地址
        onSelAddr(){
          this.showAdder=true
        },
        //显示地址确定
        onAddrData(e){
          this.showAdder=false;
          this.addressInif=e[0].name+''+e[1].name+''+e[2].name
          console.log("222",this.addressInif)
        },
        //显示地址取消
        onAddrCancel(){
          this.showAdder=false
        },

        //点击图片(身份证正面)触发该方法
        setAvatar() {
          //获得ref为avatarInput节点，并触发该节点
          this.$refs.avatarInput.click()
        },
        //选择上传图片（身份证正面），并将图片进行处理
        changeImage(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar = file;//对象格式，用于传向后台
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow = this.result//base64解析，用于页面上图片展示
          }
        },
        //点击身份证背面
        setAvatar1() {
          this.$refs.avatarInput1.click()
        },
        //选择身份证背面
        changeImage1(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar1 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow1 = this.result
          }
        },
        //点击手持身份证
        setAvatar2() {
          this.$refs.avatarInput2.click()
        },
        //选择手持身份证
        changeImage2(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar2 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow2 = this.result
          }
        },
        //点击营业执照
        setAvatar3() {
          this.$refs.avatarInput3.click()
        },
        //选择营业执照
        changeImage3(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar3 = file

          console.log("----------",this.formData.avatar3);
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow3 = this.result

          }
          console.log("----file------",this.formData.avatarshow3);
        },
        // 提交所有数据----请求后台
         submit() {
          let this_ = this;
          const formDatas=new FormData()
          formDatas.append('legal_person',this_.formData.aname)//省
          formDatas.append('legal_identity_card',this_.formData.capital)//市
          formDatas.append('company_name',this_.formData.corporateName)//区
          formDatas.append('phone',this_.formData.aphone)//电话
          formDatas.append('company_address',this.addressInif)//店铺详细地址
          formDatas.append('remark_info',this_.formData.businessScope)//法人姓名
          formDatas.append('card_front_image',this_.formData.avatar)//身份证正面
          formDatas.append('card_back_image',this_.formData.avatar1)//身份证背面
          formDatas.append('business_image_url',this_.formData.avatar3)//手持身份证
          formDatas.append('card_hand_image',this_.formData.avatar2)

          //发送请求到后台
          this.$axios({
            method:"post",
            url: '/api/common/v1/greenFinance/ftAccountRegister',
            data:formDatas,
            headers: {
              'Content-Type':'multipart/form-data'
            }
          }).then(res=>{
            if(res.success){
              this.$router.push({path: '/FTAccount'})
            }
            this.$toast(res.msg);
          }).catch(res=>{
            this.$toast(res.msg);
          })

        },

      }
    }
</script>

<style scoped>
  .FTRegistration{width: 100%;background-color: #fff;height: 100%;}
  header{width: 100%;overflow: hidden;height: 0.43rem;line-height: 0.43rem;border-bottom: 2px solid #f7f7f7;}
  header img{width: 0.13rem;float: left;margin:0.12rem 0.1rem 0.12rem 0.15rem;}
  header p{float: left;color: #ff3d3d;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 24%;text-align: left;padding-left: 0.2rem;}
  .input1{float: right;height: 0.4rem;width: 66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;margin-bottom: 0.1rem;}
  textarea{width: 90%;margin: 0 5%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding:0.1rem;line-height: 0.22rem;}
  .registration_from1 p{width: 100%;padding: 0.1rem 0.23rem 0.15rem 0.15rem;}
  .Merchant_button {width: 90%;color: #fff;font-size: 0.16rem;margin: 0.1rem 5% 0.9rem;background-color: #01bf47;border: 0;border-radius: 0.05rem;line-height: 0.44rem;}
  .xiala1{width: 66%;border-radius: 0.05rem;overflow: hidden;background-color: #f2f2f2;margin-right: 0.21rem;float: right;}
  .xiala1 input{float: left;height: 0.4rem;width: 90%;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala1 img{float: left;width: 0.12rem;margin-top: 0.15rem;}
  .registration_from2{overflow: hidden;width: 100%;line-height: 0.45rem;}

  .Merchant_foot{width: 100%;margin: 0 auto;background-color: #fff;overflow: hidden;}
  @media screen and (min-width:320px) and (max-width:374px) and (orientation:portrait) {
    .Merchant_foot_div{width: 24%;float: left;}
    .Merchant_foot_div p{font-size: 0.11rem;padding: 0.1rem 0 0.1rem 0.05rem!important;text-align: center;color: #808080;width: 100%!important;}
    .Merchant_foot_div img{width: 0.6rem;height: 0.6rem;margin-left: 15%;}
    .registration_from2 p{float: left;width: 24%;text-align: right;}
  }
  @media screen and (min-width:375px) and (max-width:414px) and (orientation:portrait) {
    .Merchant_foot_div{width: 24%;float: left;}
    .Merchant_foot_div p{font-size: 0.11rem;padding: 0.1rem 0 0.1rem 0.1rem!important;text-align: center;color: #808080;width: 100%!important;}
    .Merchant_foot_div img{width: 0.8rem;height: 0.8rem;margin-left: 15%;}
    .registration_from2 p{float: left;width: 24%;text-align: right;padding-right: 0.1rem;}
  }

</style>
